<template>
  <div class="app-container">
    <el-popover
      v-model="isShow"
      placement="bottom"
      width="300"
      trigger="manual"
    >
      <el-checkbox v-for="item in resultList" :key="item.lineId" v-model="item.lineCheck" :label="item.lineName" @change="checkOne(item)">{{ item.lineName }}</el-checkbox>
      <li v-show="hasNoData" class="search-item border-bottom">
        无匹配数据
      </li>
      <el-input slot="reference" v-model="keyword" clearable class="input-search" placeholder="请输入内容" />
    </el-popover>

    <ul>
      <li v-for="item in checkedList" :key="item.lineId">
        <el-tag closable color="#3b425d" @close="handleClose(item)">
          {{ item.lineName }}
        </el-tag>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      keyword: '', // 文本框的值
      timer: null,
      // 数据
      lineList: [
        {
          lineId: 1,
          lineName: '数刷据1',
          lineCheck: false
        },
        {
          lineId: 'line2',
          lineName: '数啊据2',
          lineCheck: false
        },
        {
          lineId: 'line3',
          lineName: '数官方据3',
          lineCheck: false
        },
        {
          lineId: 'line4',
          lineName: '数发据4',
          lineCheck: false
        },
        {
          lineId: 'line5',
          lineName: '数还给据5',
          lineCheck: false
        }
      ],
      resultList: [], // 结果数据
      // 选中的数据
      checkedList: [],
      // 下拉列表是否显示
      isShow: false
    }
  },
  computed: {
    hasNoData() {
      return !this.resultList.length
    }
  },
  watch: {
    keyword() {
      var _search = this.keyword
      if (!_search) {
        this.resultList = []
        this.isShow = false
        return
      }
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.resultList = this.lineList.filter(function(item) {
          return Object.keys(item).some(function(key) {
            return String(item.lineName).toLowerCase().indexOf(_search) > -1
          })
        })
        if (this.resultList.length >= 0) {
          this.isShow = true
        }
      }, 100)
    }
  },

  mounted: function() {
    var _this = this
    // 点击页面空白处隐藏下拉列表
    document.addEventListener('click', function() {
      _this.isShow = false
    })
  },
  methods: {
    // 选择单个
    checkOne: function(item) {
      this.resultList.every(function(item) {
        return item.lineCheck === true
      })
      this.getCheckData()
    },
    // 获取选中的数据
    getCheckData: function() {
      this.checkedList = this.resultList.filter(function(item) {
        return item.lineCheck === true
      })
    },
    handleClose(tagItem) {
      this.checkedList.splice(this.checkedList.indexOf(tagItem), 1)
      this.resultList.map(function(item) {
        if (item === tagItem) {
          item.lineCheck = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.input-search{
  width: 300px
}
ul {
  list-style-type:none;
  margin:0;
  padding:0;
  li{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 200px;
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.el-tag {
  color: #ffffff;
  ::v-deep .el-tag__close {
    color: #ffffff;
  }
}
::v-deep .el-icon-close:hover {
  color: $mainColor;
  background: #ffffff;
}
::v-deep .el-input__inner:focus {
  border-color: $mainColor;
}
::v-deep .el-checkbox__inner:hover {
  border-color: $mainColor;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: $mainColor;
    border-color: $mainColor;
}
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
    color: $mainColor;
}
::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: $mainColor;
}
</style>

